Enhanced Navigation and Vendor Prefixes

Understanding Vendor Prefixes
CSS3 has not yet reached the W3C’s Candidate Recommendation stage (which would mean that the specifications are complete), many parts have already been implemented in recent versions of Firefox, Internet Explorer, Chrome, Safari, and Opera.
In order to future-proof unfinished (and occasionally competing) CSS implementations that are subject to change, those that require it have been implemented in browsers using what are called vendor prefixes. These allow each browser to introduce its own support for a property without conflicting with the final specification or with other browsers. Additionally, vendor prefixes provide a way to ensure that, once a specification has matured or been finalized, existing Web sites using the experimental implementations do not break.

Each of the major browsers has its own prefix:

• -webkit- Webkit/Safari/Chrome,
• -moz- Firefox,
• -ms- Internet Explorer,
• -o- Opera, and
• -khtml- Konqueror

Using CSS3, corners of most elements can be rounded by using the border-radius property, which requires using vendor prefixes to support older versions of Firefox and of Webkit-based browsers such as Chrome and Safari.

div
{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

The border-radius is used to round all corners of an element, however to round each corner use properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.